<!--
 * @Author: 1453937336@qq.com 1453937336@qq.com
 * @Date: 2024-04-19 14:30:53
 * @LastEditors: 1453937336@qq.com 1453937336@qq.com
 * @LastEditTime: 2024-07-10 10:51:46
 * @FilePath: \itforce-hris\src\pages\organization\components\organization-chart.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div style="padding: 32px">
    <a-row style="margin-bottom: 16px">
      <a-col :span="24" style="display: flex; justify-content: flex-end">
        <div class="org-text">
          Note:Please make sure all units are displayed on the page before
          downloading(Use the zoom function - Mouse wheel scrolling).
        </div>
        <a-button style="margin-right: 8px" @click="handleDownIamges">
          <i class="fa fa-download"/> <span style="margin-left: 4px;margin-right: 4px;">SVG</span>
        </a-button>
        <a-button style="margin-right: 8px" @click="handleDownPdf">
          <i class="fa fa-download"/> <span style="margin-left: 4px;margin-right: 4px;">PDF</span>
        </a-button>
        <!-- <a-button
          style="margin-right: 8px"
          @click="onSwitch"
          :icon="ifSwitch ? h(UnorderedListOutlined) : h(ClusterOutlined)"
        ></a-button> -->
        <a-button :icon="h(CloseOutlined)" @click="onClose"></a-button>
      </a-col>
    </a-row>

    <TreeChart
      v-if="stringTree.length > 0"
      ref="TreeChartRef"
      :treeData="stringTree"
    />

  </div>
</template>
<script setup>
import { h } from "vue";
import { ref, nextTick, defineAsyncComponent, onMounted, computed } from "vue";
import {
  CloseOutlined,
} from "@ant-design/icons-vue";
import { useLanguage } from "@/hooks/index";
const { isEn, isCn, isArabic } = useLanguage();
const TreeChart = defineAsyncComponent(() => import("./TreeChart.vue"));
const props = defineProps({
  treeData: { type: Array, default: [] },
});
const TreeChartRef = ref(null);
// 使用watch来监听对象
const stringTree = ref([])
const convertValuesToString = (tree) => {
  return tree.map((node) => {
    const convertedNode = { ...node };
    if (convertedNode.children) {
      convertedNode.children = convertValuesToString(convertedNode.children);
    }
    convertedNode.id = String(convertedNode.id);
    convertedNode.nameZh = isCn && convertedNode.nameZh ? convertedNode.nameZh : convertedNode.nameEn
      convertedNode.nameAr = isArabic && convertedNode.nameAr ? convertedNode.nameAr : convertedNode.nameEn
    return convertedNode;
  });
};

const addLevels = (nodes, level2 = 0) => {
  return nodes.map(node => {
    node.level2 = level2; // 添加层级标记
    if (node.children && node.children.length > 0) {
      node.children = addLevels(node.children, level2 + 1);
    }
    return node;
  });
}

watch(() => props.treeData, async (newVal) => {
    console.log('使用watch来监听对象treeData', newVal)
    if (newVal && newVal.length > 0) {
      stringTree.value = addLevels(convertValuesToString(newVal));
    }
  },
  {
    flush: 'post',
    deep: true,
    immediate: true
  }
);
const handleDownIamges = () => {
  TreeChartRef.value.downImage();
};
const handleDownPdf = () => {
  TreeChartRef.value.downPdf();
};
const emits = defineEmits(["close"]);
const onClose = () => {
  TreeChartRef.value.closeChart();
  emits("close", false);
};
</script>
<style lang="scss" scoped>
.org-text {
  background-color: #fff3cd;
  display: flex;
  align-items: center;
  padding: 0 8px;
  margin-right: 8px;
}
</style>
